<template>
    <el-container class="bg-page">
        <el-header style="height: 300px;">
            <img src="../../static/img/idx.jpg">
        </el-header>
        <el-main>

            <el-row :gutter="24" class="card_block">
                <el-col :span="5">
                    <label class="input-label">手机号:</label>
                </el-col>
                <el-col :span="19">
                    <el-input type="tel" v-model="phone"> </el-input>
                </el-col>
            </el-row>


            <el-row :gutter="24" class="card_block">
                <el-col :span="5">
                    <label class="input-label">密码:</label>
                </el-col>
                <el-col :span="19">
                    <el-input type="password" v-model="password"> </el-input>
                </el-col>
            </el-row>


            <el-row :gutter="24" class="card_block" style="display: flex; justify-content: flex-end;margin-top: 50pt;">
                <el-col :span="12">
                    <button class="primary-btn" style="width: 100%;" @click="register">注册</button>
                </el-col>
                <el-col :span="12">
                    <button class="primary-btn" style="width: 100%;" @click="login">登陆</button>
                </el-col>
            </el-row>


        </el-main>
        <el-footer>
            <img src="../../static/img/foot.png">
        </el-footer>
    </el-container>
</template>

<script>
import Api from '../../api/api'
export default {
    data() {
        return {
            phone: '',
            password: ''
        }
    },
    methods: {
        onLoad() {
            let user = uni.getStorageSync('user');
            if (user && user.token != '') {
                Api.setToken(user.token)
                uni.reLaunch({ url: '/pages/tabbar/home/home' })
            }
            console.log(user)
        },
        register() {
            uni.reLaunch({ url: '/pages/register/register' })
        },
        login() {
            Api.login({ phone: this.phone, password: this.password }).then(response => {
                console.log(response.data)
                this.$message.success(response.data.message);
                if (response.status == 200) {
                    uni.setStorageSync('user', response.data.data);
                    this.$Global.user = uni.getStorageSync('user');
                    Api.setToken(response.data.data.token)
                    uni.reLaunch({ url: '/pages/tabbar/home/home' })
                }
            })
        }
    }
};
</script>

<style>
.content {
    text-align: center;
    height: 100%;
}

.card_block {
    text-align: center;
    background-color: white;
    margin-top: 10pt;
    border-radius: 10px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.icon-button {
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 5pt;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg-page {
    text-align: center;
    background: #ffffff;
    padding: 0px;
    margin: 0px;
    height: 100vh;
}
</style>
